<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>技能详情 - 摄影交换</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .navbar {
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      z-index: 1050;
    }
    
    /* 内容区样式 */
    .content-container {
      margin-top: 56px;
    }
    
    /* 技能图片 */
    .skill-img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    
    /* 用户信息区 */
    .user-info {
      background-color: white;
      border-radius: 16px 16px 0 0;
      margin-top: -24px;
      padding: 20px 16px 16px;
    }
    
    .avatar-large {
      width: 72px;
      height: 72px;
      border: 3px solid white;
      margin-top: -50px;
    }
    
    /* 技能标签 */
    .skill-tag {
      background-color: #e3f2fd;
      color: #1976d2;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 12px;
    }
    
    /* 操作按钮 */
    .action-btn {
      border-radius: 20px;
      font-size: 14px;
    }
    
    /* 详情卡片 */
    .detail-card {
      background-color: white;
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
    }
    
    /* 留言区 */
    .comment-item {
      padding: 16px 0;
      border-bottom: 1px solid #eee;
    }
    
    .comment-item:last-child {
      border-bottom: none;
    }
    
    .reply-item {
      background-color: #f5f5f5;
      border-radius: 8px;
      padding: 12px;
      margin-top: 10px;
      margin-left: 40px;
    }
    
    /* 底部输入框 */
    .comment-input {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px 16px;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      z-index: 1040;
    }
    
    /* 交互反馈 */
    .like-btn.active {
      color: #dc3545;
    }
    
    .icon-btn {
      color: #666;
      transition: color 0.2s;
    }
    
    .icon-btn:hover {
      color: #1976d2;
    }
  </style>
</head>
<body>
  <!-- 顶部导航栏 -->
  <nav class="navbar navbar-light bg-white fixed-top">
    <div class="container-fluid px-4">
      <button class="btn btn-link p-0 me-2" type="button">
        <i class="fa fa-arrow-left text-dark"></i>
      </button>
      <h5 class="navbar-brand mb-0 fw-bold flex-grow-1 text-center">技能详情</h5>
      <button class="btn btn-link p-0" type="button">
        <i class="fa fa-share-alt text-dark"></i>
      </button>
    </div>
  </nav>

  <!-- 主内容区 -->
  <div class="content-container">
    <!-- 技能图片 -->
    <img src="https://picsum.photos/800/500?random=1" class="skill-img" alt="摄影技能展示">
    
    <!-- 用户信息区 -->
    <div class="user-info">
      <div class="d-flex justify-content-between">
        <div>
          <img src="https://picsum.photos/100/100?random=101" class="avatar-large rounded-circle mb-2" alt="用户头像">
          <h5 class="fw-bold">李明</h5>
          <div class="d-flex align-items-center mt-1">
            <span class="skill-tag me-2">摄影</span>
            <span class="text-secondary text-sm"><i class="fa fa-map-marker mr-1"></i>2公里 · 2小时前</span>
          </div>
        </div>
        <div class="d-flex flex-column gap-2 mt-2">
          <button class="btn btn-primary action-btn">
            <i class="fa fa-comments mr-1"></i>私信
          </button>
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-user-plus mr-1"></i>关注
          </button>
        </div>
      </div>
    </div>
    
    <!-- 技能详情 -->
    <div class="px-4 mt-3">
      <!-- 技能介绍 -->
      <div class="detail-card">
        <h6 class="fw-bold mb-3">技能介绍</h6>
        <p class="text-sm text-secondary mb-0">
          拥有5年单反摄影经验，擅长人像、风景和纪实摄影。可以教授摄影基础理论、构图技巧、光线运用以及后期修图（Lightroom/Photoshop）。<br><br>
          希望交换学习：吉他入门（和弦、简单弹唱），最好有基础乐理教学。<br><br>
          时间灵活，可线上教学也可线下交流（周末为佳）。
        </p>
      </div>
      
      <!-- 技能亮点 -->
      <div class="detail-card">
        <h6 class="fw-bold mb-3">我的技能亮点</h6>
        <div class="row gap-2">
          <div class="col-4 bg-light rounded-lg p-2 text-center">
            <i class="fa fa-camera text-primary mb-1"></i>
            <p class="text-xs mb-0">人像摄影</p>
          </div>
          <div class="col-4 bg-light rounded-lg p-2 text-center">
            <i class="fa fa-image text-primary mb-1"></i>
            <p class="text-xs mb-0">后期修图</p>
          </div>
          <div class="col-4 bg-light rounded-lg p-2 text-center">
            <i class="fa fa-video-camera text-primary mb-1"></i>
            <p class="text-xs mb-0">短视频拍摄</p>
          </div>
        </div>
      </div>
      
      <!-- 想学习的技能 -->
      <div class="detail-card">
        <h6 class="fw-bold mb-3">希望学习的技能</h6>
        <div class="row gap-2">
          <div class="col-4 bg-light rounded-lg p-2 text-center">
            <i class="fa fa-music text-primary mb-1"></i>
            <p class="text-xs mb-0">吉他弹唱</p>
          </div>
          <div class="col-4 bg-light rounded-lg p-2 text-center">
            <i class="fa fa-microphone text-primary mb-1"></i>
            <p class="text-xs mb-0">乐理基础</p>
          </div>
        </div>
      </div>
      
      <!-- 作品展示 -->
      <div class="detail-card">
        <h6 class="fw-bold mb-3">作品展示</h6>
        <div class="row gap-2">
          <div class="col-4">
            <img src="https://picsum.photos/300/300?random=21" class="rounded-lg w-100" alt="作品1">
          </div>
          <div class="col-4">
            <img src="https://picsum.photos/300/300?random=22" class="rounded-lg w-100" alt="作品2">
          </div>
          <div class="col-4">
            <img src="https://picsum.photos/300/300?random=23" class="rounded-lg w-100" alt="作品3">
          </div>
        </div>
      </div>
      
      <!-- 互动数据 -->
      <div class="detail-card d-flex justify-content-around text-center">
        <div>
          <p class="text-primary fw-bold">128</p>
          <p class="text-xs text-secondary">浏览</p>
        </div>
        <div>
          <p class="text-primary fw-bold">36</p>
          <p class="text-xs text-secondary">私信</p>
        </div>
        <div>
          <p class="text-primary fw-bold">24</p>
          <p class="text-xs text-secondary">收藏</p>
        </div>
        <div>
          <p class="text-primary fw-bold">52</p>
          <p class="text-xs text-secondary">关注</p>
        </div>
      </div>
      
      <!-- 留言区 -->
      <div class="detail-card">
        <h6 class="fw-bold mb-3">留言交流 (18)</h6>
        
        <!-- 留言1 -->
        <div class="comment-item">
          <div class="d-flex">
            <img src="https://picsum.photos/60/60?random=301" class="rounded-circle me-3" width="40" height="40" alt="用户头像">
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold text-sm">陈摄影</h6>
                <span class="text-xs text-secondary">昨天 14:30</span>
              </div>
              <p class="text-sm mt-1">你的人像摄影很专业啊，想请教一下如何处理逆光环境？我可以教你一些基础的吉他和弦~</p>
              <div class="d-flex gap-3 mt-2">
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-thumbs-o-up mr-1"></i> 12
                </button>
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-reply mr-1"></i> 回复
                </button>
              </div>
              
              <!-- 回复 -->
              <div class="reply-item">
                <div class="d-flex justify-content-between">
                  <h6 class="fw-bold text-sm">李明 <span class="text-xs text-secondary">作者</span></h6>
                  <span class="text-xs text-secondary">昨天 15:12</span>
                </div>
                <p class="text-sm mt-1">逆光可以尝试点测光，或者用反光板补光~ 吉他正好是我想学的，私信聊？</p>
                <div class="d-flex gap-3 mt-2">
                  <button class="icon-btn text-xs d-flex align-items-center">
                    <i class="fa fa-thumbs-o-up mr-1"></i> 5
                  </button>
                  <button class="icon-btn text-xs d-flex align-items-center">
                    <i class="fa fa-reply mr-1"></i> 回复
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 留言2 -->
        <div class="comment-item">
          <div class="d-flex">
            <img src="https://picsum.photos/60/60?random=302" class="rounded-circle me-3" width="40" height="40" alt="用户头像">
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold text-sm">王吉他</h6>
                <span class="text-xs text-secondary">3天前</span>
              </div>
              <p class="text-sm mt-1">我教吉他6年了，可以跟你换摄影技巧，我正好想提升一下旅行拍照水平，怎么联系你？</p>
              <div class="d-flex gap-3 mt-2">
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-thumbs-o-up mr-1"></i> 8
                </button>
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-reply mr-1"></i> 回复
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 留言3 -->
        <div class="comment-item">
          <div class="d-flex">
            <img src="https://picsum.photos/60/60?random=303" class="rounded-circle me-3" width="40" height="40" alt="用户头像">
            <div class="flex-grow-1">
              <div class="d-flex justify-content-between">
                <h6 class="fw-bold text-sm">张同学</h6>
                <span class="text-xs text-secondary">1周前</span>
              </div>
              <p class="text-sm mt-1">请问你用的是什么相机和镜头？我也想入门摄影，但是不知道怎么选设备</p>
              <div class="d-flex gap-3 mt-2">
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-thumbs-o-up mr-1"></i> 3
                </button>
                <button class="icon-btn text-xs d-flex align-items-center">
                  <i class="fa fa-reply mr-1"></i> 回复
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多留言 -->
        <div class="text-center py-2">
          <button class="btn btn-light btn-sm rounded-pill px-4">
            查看更多留言
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部留言输入框 -->
  <div class="comment-input">
    <div class="input-group">
      <input type="text" class="form-control rounded-pill border-primary" placeholder="写下你的留言...">
      <button class="btn btn-primary ms-2 rounded-pill px-4">发送</button>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 点赞功能
    document.querySelectorAll('.icon-btn').forEach(btn => {
      if (btn.querySelector('.fa-thumbs-o-up')) {
        btn.addEventListener('click', function() {
          this.classList.toggle('active');
          const icon = this.querySelector('i');
          if (this.classList.contains('active')) {
            icon.classList.remove('fa-thumbs-o-up');
            icon.classList.add('fa-thumbs-up');
            
            // 更新点赞数
            const countEl = this.childNodes[2];
            let count = parseInt(countEl.textContent.trim());
            countEl.textContent = ` ${count + 1}`;
          } else {
            icon.classList.remove('fa-thumbs-up');
            icon.classList.add('fa-thumbs-o-up');
            
            // 更新点赞数
            const countEl = this.childNodes[2];
            let count = parseInt(countEl.textContent.trim());
            countEl.textContent = ` ${count - 1}`;
          }
        });
      }
    });
    
    // 滚动时调整导航栏样式
    window.addEventListener('scroll', function() {
      const navbar = document.querySelector('.navbar');
      if (window.scrollY > 50) {
        navbar.classList.add('shadow-sm');
      } else {
        navbar.classList.remove('shadow-sm');
      }
    });
  </script>
</body>
</html>
